<script setup lang="ts">
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
import { useLocale } from "@/locales/useLocale";
import { MyIcon } from "@/components/MyIcon/";
const { changeLocale } = useLocale();

// 切换语言
const changeLang = (lang: LocaleType) => {
  changeLocale(lang);
};
</script>

<template>
  <el-dropdown style="cursor: pointer" trigger="click" class="dropdown">
    <div class="el-dropdown-link">
      <MyIcon icon="lang" size="24px"/>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click.native="changeLang('zhCN')"
          >简体中文</el-dropdown-item
        >
        <el-dropdown-item @click.native="changeLang('en')"
          >English</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<style scoped lang="less"></style>
